<!--
 * @Author: keledd
 * @Date: 2021-10-29 16:06:10
 * @LastEditors: keledd
 * @LastEditTime: 2021-12-23 14:14:47
 * @FilePath: /letter/src/components/layout.vue
-->
<!-- layout -->
<template>
  <div class="header">
      <img class="envelope" src="../assets/envelope.png" alt="" @click="showLetter = true">
      <img src="../assets/mailbox.png" alt="">
  </div>
  <Letter v-if="showLetter" @handleCancel="()=>showLetter = false"></Letter>
</template>

<script lang='ts'>
import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'
import Letter from "../views/letter/intex.vue";
interface DataProps {}
export default {
    name: '',
    components:{Letter},
      setup() {
          console.log('1-开始创建组件-setup')
          const data: DataProps = reactive({
              showLetter:false
          })
          onBeforeMount(() => {
              console.log('2.组件挂载页面之前执行----onBeforeMount')
          })
          onMounted(() => {
              console.log('3.-组件挂载到页面之后执行-------onMounted')
          })
          const refData = toRefs(data);
          return {
              ...refData,
          }

      }
  };
</script>
<style scoped lang="scss">
.header{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding: 10px;

    .envelope{
        margin-right: 20px;
    }

    img{
        width: 40px;
    }
}
</style>